<template>
    <div class="container">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>提交时间</th>
            <th>视频</th>
            <!-- 其他字段 -->
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in data" :key="item.id">
            <td>{{ item.time }}</td>
            <td>
              <video controls >
                <source :src="'http://127.0.0.1:80/video/'+item.time+'_'+user+'.mp4/'"  type="video/mp4">
              </video>
            
            </td>
            <!-- 其他字段 -->
          </tr>
        </tbody>
      </table>
      <nav aria-label="Page navigation">
        <ul class="pagination">
          <li class="page-item" :class="{ disabled: currentPage === 1 }">
            <a class="page-link" href="#" @click.prevent="prevPage">上一页</a>
          </li>
          <li class="page-item" v-for="page in pages" :key="page" :class="{ active: currentPage === page }">
            <a class="page-link" href="#" @click.prevent="changePage(page)">{{ page }}</a>
          </li>
          <li class="page-item" :class="{ disabled: currentPage === totalPages }">
            <a class="page-link" href="#" @click="nextPage()">下一页</a>
          </li>
        </ul>
      </nav>
    </div>
  </template>
  

<script>
import axios from 'axios'

export default {
  data() {
    return {
      data: [],
      currentPage: 1,
      totalPages: 1,
      user:localStorage.getItem("user")
    }
  },
  computed: {
    pages() {
      let pages = []
      for (let i = 1; i <= this.totalPages; i++) {
        pages.push(i)
      }
      return pages
    }
  },
  methods: {
    fetchData() {
      axios.post('http://127.0.0.1:80/his/', {
        user: localStorage.getItem("user"),
        page: this.currentPage
      },
      {
            headers: {
                        'Content-Type': 'multipart/form-data',
                        'token':localStorage.getItem('token')
                    }
      }).then(response => {
        this.data = response.data.data
        this.totalPages = Math.ceil(response.data.count / 10)
      })
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
        this.fetchData()
        console.log("上一页");
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        console.log("下一页");
        this.currentPage++
        this.fetchData()
      }
    },
    changePage(page) {
      this.currentPage = page
      this.fetchData()
    }
  },
  mounted() {
    this.fetchData()
  }
}
</script>

<style>

</style>